<style lang="scss" scoped>
.cards {
    height: 100%;
    padding: 20px;
    gap: 10px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);

    .card {
        border: 1px solid #fff;
        display: flex;
        flex-direction: column;

        &>:nth-child(n) {
            flex-basis: 0;
            // min-height: 0;
        }

        &>:nth-child(1) {
            flex-grow: 2;
            // place-items: center;

        }

        &>:nth-child(2) {
            flex-grow: 1;
            text-align: center;
            // flex-basis: 30px;
        }

        .card-content {
            display: grid;
            grid-template-columns: auto auto;
            align-content: center;
            justify-content: center;


            .value {
                font-size: 28px;
                font-weight: bold;
                color: #fff;
            }

            .unit {
                margin-left: 4px;
                font-size: 16px;
                color: #ccc;
                display: flex;
                align-items: end;
            }
        }
        .card-header{
            letter-spacing: 2px;
        }

    }
}
</style>
<template>
<div class="cards">
    <div class="card" v-for="{ id, label, value, unit } in cards.data" :key="id">
        <div class="card-content">
            <span class="value">
                {{ value }}
            </span>
            <span class="unit">
                {{ unit }}
            </span>
        </div>
        <div class="card-header">{{ label }}</div>
    </div>
</div>
</template>
<script setup>
import { reactive } from 'vue'

const cards = reactive({
    data: [
        { id: 1, label: '氧气浓度', value: '25', unit: 'mg/L' },
        { id: 2, label: '温度', value: '18', unit: '℃' },
        { id: 3, label: '湿度', value: '36', unit: '%' },
        { id: 4, label: '安全门', value: '关闭', unit: '' },
    ]
})
</script>